<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-15 08:36:49
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-15 21:06:32
-->
<template>
    <div class="background">
      <!-- 登录 --> 
      <p v-if="flag" @click="changeFlag">没有账号，立即<a href="">注册</a></p>
      <p v-if="!flag" @click="changeFlag">已有账号，直接<a href="">登录</a></p>
       <button @click="changeFlag">{{ flag ? '去注册页面' : '去登录页面' }}</button>
       <LoginForm v-if="flag" />
       <RegisterForm v-else />
    </div>
</template>
<script setup>
  import { ref } from 'vue'
  import LoginForm from '@/view/Login.vue';
  import RegisterForm from '@/view/Register.vue';
  const flag = ref(true)
function changeFlag () {
  flag.value = !flag.value;
}
</script>

<style scoped>
.background {
  background-image: url('./img/bgimg.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
